<script setup lang="ts">
import type { TodoItemAdapted } from '../todo.vue'
import { ref } from 'vue'
import { formatDate, formatDuration } from '@/utils/timeUtils'

// 定义组件属性
const props = defineProps<{
  item: TodoItemAdapted
}>()

// 定义组件事件
const emit = defineEmits<{
  (e: 'click', item: TodoItemAdapted): void
}>()

// 展开收起状态控制
const isExpanded = ref(false)

// 获取wot-ui标签类型
type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger'
function getStatusType(status: string): TagType {
  switch (status) {
    case '待审批':
    case '审批中':
      return 'primary'
    case '已完成':
    case '审批通过':
      return 'success'
    case '审批不通过':
    case '已拒绝':
      return 'danger'
    default:
      return 'default'
  }
}

// 处理卡片点击事件
function handleClick() {
  emit('click', props.item)
}

// 切换展开收起状态
function toggleExpand() {
  isExpanded.value = !isExpanded.value
}

// 判断是否有隐藏数据需要展开显示
const hasHiddenData = computed(() => {
  const item = props.item
  if (!item)
    return false

  // 需要检查的隐藏字段列表
  const hiddenFields = ['customerName', 'orgName', 'businessType', 'departName', 'businessName', 'businessTime']

  // 将item转换为Record类型，以便遍历属性
  const itemRecord = item as Record<string, any>

  // 遍历需要检查的隐藏字段，只要有一个字段有值，就返回true
  for (const key of hiddenFields) {
    const value = itemRecord[key]
    if (value != null && value !== '' && value !== undefined) {
      return true
    }
  }

  return false
})
</script>

<template>
  <view class="todo-item overflow-hidden rounded-xl bg-white shadow-md transition-all duration-200 active:scale-[0.99] active:shadow-sm hover:shadow-lg">
    <!-- 标题 -->
    <view class="flex items-center px-4 pt-4">
      <WdTag mark :type="getStatusType(item.status || '')" class="absolute left-1 top-0.5 scale-120">
        {{ item.status || '待审批' }}
      </WdTag>
      <text class="line-clamp-2 text-lg text-slate-800 font-bold">{{ item.taskName || '未命名任务' }}</text>
    </view>
    <!-- 卡片内容 -->
    <view class="p-5 pt-3">
      <!-- 业务属性信息 -->
      <view v-if="item" class="business-attribute mb-4 rounded-lg bg-slate-50 p-3">
        <!-- 业务属性列表 -->
        <template v-if="item">
          <!-- 业务单号 -->
          <view v-if="item.businessNum" class="mb-2">
            <text class="mb-1 block text-xs text-slate-500">业务单号</text>
            <text class="text-sm text-slate-700 font-medium">{{ item?.businessNum || '-' }}</text>
          </view>
          <!-- 处理时长 -->
          <view v-if="item.durationInMillis" class="mb-2">
            <text class="mb-1 block text-xs text-slate-500">处理时长</text>
            <text class="text-sm text-slate-700 font-medium">{{ formatDuration(item?.durationInMillis || 0) }}</text>
          </view>
          <!-- 审批意见 -->
          <view v-if="item.reason" class="mb-2">
            <text class="mb-1 block text-xs text-slate-500">审批意见</text>
            <text class="text-sm text-slate-700 font-medium">{{ item?.reason || '-' }}</text>
          </view>
          <!-- 申请金额 -->
          <view v-if="item.amount" class="mb-2">
            <text class="mb-1 block text-xs text-slate-500">申请金额</text>
            <text class="text-sm text-red font-bold">{{ item?.amount || '-' }}</text>
          </view>
          <!-- 展开时显示的额外信息 -->
          <view v-if="isExpanded">
            <!-- 审批节点 -->
            <view v-if="item.nodeName" class="mb-2">
              <text class="mb-1 block text-xs text-slate-500">审批节点</text>
              <text class="text-sm text-slate-700 font-medium">{{ item?.nodeName || '-' }}</text>
            </view>
            <!-- 客户名称 -->
            <view v-if="item.customerName" class="mb-2">
              <text class="mb-1 block text-xs text-slate-500">客户名称</text>
              <text class="text-sm text-slate-700 font-medium">{{ item?.customerName || '-' }}</text>
            </view>
            <!-- 本方公司 -->
            <view v-if="item.orgName" class="mb-2">
              <text class="mb-1 block text-xs text-slate-500">本方公司</text>
              <text class="text-sm text-slate-700 font-medium">{{ item?.orgName || '-' }}</text>
            </view>
            <!-- 业务类型 -->
            <view v-if="item.businessType" class="mb-2">
              <text class="mb-1 block text-xs text-slate-500">业务类型</text>
              <text class="text-sm text-slate-700 font-medium">{{ item?.businessType || '-' }}</text>
            </view>
            <!-- 业务部门 -->
            <view v-if="item.departName" class="mb-2">
              <text class="mb-1 block text-xs text-slate-500">业务部门</text>
              <text class="text-sm text-slate-700 font-medium">{{ item?.departName || '-' }}</text>
            </view>
            <!-- 业务人员 -->
            <view v-if="item.businessName" class="mb-2">
              <text class="mb-1 block text-xs text-slate-500">业务人员</text>
              <text class="text-sm text-slate-700 font-medium">{{ item?.businessName || '-' }}</text>
            </view>
            <!-- 业务时间 -->
            <view v-if="item.businessTime">
              <text class="mb-1 block text-xs text-slate-500">业务时间</text>
              <text class="text-sm text-slate-700 font-medium">{{ item?.businessTime ? formatDate(item.businessTime, 'datetime_short') : '-' }}</text>
            </view>
          </view>
        </template>

        <!-- 展开收起按钮 - 只有当有隐藏数据时才显示 -->
        <view v-if="hasHiddenData" class="mt-2 flex justify-end">
          <view class="flex cursor-pointer items-center text-xs text-primary" @tap="toggleExpand">
            <text>{{ isExpanded ? '收起' : '展开' }}</text>
            <i class="ml-1 transition-transform duration-200" :class="[isExpanded ? 'i-solar:sort-from-bottom-to-top-linear' : 'i-solar:sort-from-top-to-bottom-linear']" size="14" />
          </view>
        </view>
      </view>

      <!-- 底部信息 -->
      <view class="todo-footer flex items-center justify-between border-t border-slate-100 pt-3" @click="handleClick">
        <view class="flex flex-col">
          <!-- 申请人信息 -->
          <view class="todo-info mb-2">
            <view class="flex items-center">
              <text class="info-label mr-2 text-xs text-slate-500">申请人：</text>
              <text class="info-value text-xs text-slate-700 font-medium">{{ item?.nickname || '未知' }}</text>
            </view>
          </view>
          <!-- 申请时间 -->
          <text class="text-xs text-slate-400">申请时间：{{ item?.publishTime || '' }}</text>
        </view>
        <i class="i-solar:arrow-right-linear text-primary" size="16" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
/* 待办项样式 */
.todo-item {
  position: relative;
  overflow: hidden;
}

/* 响应式设计 */
@media (min-width: 768px) {
  .todo-item {
    max-width: 640px;
    // margin: 0 auto;
  }
}
</style>
